The Front-End Spectrum
Modern front-end web development is a busy place. The industry shuffle is exponentially rapid, and when you’re heads down working on a project, it can be easy to lose focus on the big picture.
This graphic represents the technology I’ve encountered in the past few years. It’s by no means comprehensive. Others have summarized their front-end tech experiences, and I’ve noted that each time it’s (naturally) from their particular perspective. It’s simply not possible (or at least easily achievable) for a single individual to have a “complete” view of the current landscape.
I’ve included tech from three categories:
- Tech I work with on a daily basis.
- Tech that’s part of projects I work on, but not my primary responsibility.
- Tech I’m tangentially aware of. This includes tech other front-end developers I work with may have worked with, but I haven’t experimented with yet.
Here’s my take on the front-end spectrum. It’s decidedly Rails-skewed, which is simply a result of my employment at Rails shops for the past few years:
I’ve written about the details before, so check out those posts for more detail. For now, I’ll simply list what each piece is (in case it’s not apparent from the logo):
Core
- HTML (HTML5)
- CSS (CSS3)
- JavaScript (ES6)
- Web Components
Text Editors
- Atom
- Sublime Text
- WebStorm
UI Frameworks
- Bootstrap
- Ionic
- Foundation
Responsible Web Design
- Responsive Web Design
- Progressive Enhancement
- Accessibility
Templating
- Handlebars
- Haml
- Jade
Browser Refreshing
- LiveReload
- Guard
CSS Preprocessors
- Sass
- Less
OOCSS & Style Guides
- MVCSS
- SMACSS
- BEM
- Inuitcss
- KSS
- Pattern Lab
Version Control
- Git
- Subversion
- Mercurial
Package Mangers
- npm
- Bower
- CodeKit
Front-End Performance
- WebPagetest
- mod_pagespeed
- PerfBudget
- CriticalCSS
- Picturefill
JS Frameworks
- jQuery
- Backbone
- Ember
- AngularJS
- React
- Polymer
- D3
JS Preprocessors
- CoffeeScript
- TypeScript
- Babel
Process Automation
- Grunt
- Gulp
- Broccoli
Code Quality
- JSCS
- ESLint
Build Tools
- RequireJS
- Browserify
- Webpack
Testing
- Jasmine
- Mocha
- Protractor
- Karma
Back-End
- NodeJS
- Rails
This is a very high-level view of the modern front-end landscape. I’ve left a lot out, notably mobile tools I use like Cordova, Rails gems like Spree that are heavily integrated into projects I’ve worked on, or other tech I’ve worked with like Electron and native iOS app development. I think they (and many others), don’t quite fit into the front-end spectrum.
You may also notice a few items you consider odd. Theories like “responsive web design” and back end tools like Rails appear in the spectrum. The responsible web design category is included because it’s a category that often gets overlooked, but I feel is incredibly important for modern front-end developers to have minimally an awareness of. Back-end stuff is included because while technically not front-end, these are items front-end devs must have some familiarity with and will most definitely encounter.
This graphic was part of a process I’ve gone through to do what I believe is required of any modern front-end developer: determine what you’re passionate about, determine where your strengths lie, and then focus on the crossover areas. Hopefully it helps you get a lay of the land, and maybe figure out where you want to focus as well.
